<template>
  <div class="app-container">
    <!-- 顶部用户栏 -->
    <header class="header">
      <div class="logo">
        <span class="logo-icon">⚡</span>
        <span>轻客管家</span>
      </div>
      <div class="user-info">
        <span class="user-name">传小智</span>
        <span class="logout-btn" @click="handleLogout">退出</span>
      </div>
    </header>

    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧导航栏 -->
      <aside class="sidebar">
        <nav class="menu">
          <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical tech-menu"
            router
            @select="handleMenuSelect"
            background-color="#0d1117"
            text-color="#8b949e"
            active-text-color="#58a6ff"
          >
            <el-menu-item index="/">
              <el-icon><HomeFilled /></el-icon>
              <span>首页</span>
            </el-menu-item>

            <el-sub-menu index="线索管理">
              <template #title>
                <el-icon><Menu /></el-icon>
                <span>线索管理</span>
              </template>
              <el-menu-item index="/clue/list">线索列表</el-menu-item>
              <el-menu-item index="/clue/pool">线索池</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="商机管理">
              <template #title>
                <el-icon><Goods /></el-icon>
                <span>商机管理</span>
              </template>
              <el-menu-item index="/business/list">商机列表</el-menu-item>
              <el-menu-item index="/business/pool">公池</el-menu-item>
            </el-sub-menu>

            <el-menu-item index="/customer">
              <el-icon><User /></el-icon>
              <span>客户管理</span>
            </el-menu-item>

            <el-sub-menu index="资源管理">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>资源管理</span>
              </template>
              <el-menu-item index="/course">课程管理</el-menu-item>
              <el-menu-item index="/activity">活动管理</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="系统管理">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/dept">部门管理</el-menu-item>
              <el-menu-item index="/role">角色管理</el-menu-item>
              <el-menu-item index="/user">用户管理</el-menu-item>
              <el-menu-item index="/log">系统日志</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </nav>
      </aside>

      <!-- 右侧内容区 -->
      <main class="content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
  HomeFilled,
  Menu,
  Goods,
  User,
  Document,
  Setting,
} from "@element-plus/icons-vue";

const route = useRoute();
const activeMenu = computed(() => route.path);

const handleMenuSelect = (key, keyPath) => {
  console.log("选中的菜单:", key, keyPath);
};

// 处理退出登录
const handleLogout = () => {
  // 清除localStorage中的用户信息和token
  localStorage.removeItem('user');
  localStorage.removeItem('token');
  // 跳转到登录页
  window.location.href = '/login';
};

// 添加页面加载动画效果
onMounted(() => {
  document.body.classList.add("loaded");
});
</script>

<style scoped>
/* 科技感主题样式 */
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
  color: #c9d1d9;
}

/* 顶部导航栏 */
.header {
  height: 60px;
  background: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #30363d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #58a6ff;
  gap: 8px;
}

.logo-icon {
  font-size: 24px;
  filter: drop-shadow(0 0 5px rgba(88, 166, 255, 0.5));
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-name {
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(139, 148, 158, 0.1);
  transition: all 0.3s ease;
}

.user-name:hover {
  background: rgba(139, 148, 158, 0.2);
}

.logout-btn {
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #30363d;
}

.logout-btn:hover {
  background: #da3633;
  color: white;
  border-color: #f85149;
}

/* 主体内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏 */
.sidebar {
  width: 240px;
  background: #0d1117;
  border-right: 1px solid #30363d;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #30363d transparent;
}

.sidebar::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #30363d;
  border-radius: 3px;
}

/* 菜单样式增强 */
.menu {
  padding-top: 20px;
}

.tech-menu .el-menu-item {
  position: relative;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.tech-menu .el-menu-item:hover {
  background-color: rgba(88, 166, 255, 0.1) !important;
  border-left-color: rgba(88, 166, 255, 0.5);
}

.tech-menu .el-menu-item.is-active {
  background-color: rgba(88, 166, 255, 0.15) !important;
  border-left-color: #58a6ff;
  box-shadow: inset 0 0 10px rgba(88, 166, 255, 0.1);
}

.tech-menu .el-sub-menu__title {
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.tech-menu .el-sub-menu__title:hover {
  background-color: rgba(88, 166, 255, 0.1) !important;
  border-left-color: rgba(88, 166, 255, 0.5);
}

.tech-menu .el-sub-menu.is-opened > .el-sub-menu__title {
  background-color: rgba(88, 166, 255, 0.1) !important;
  border-left-color: #58a6ff;
}

/* 右侧内容区域 */
.content {
  flex: 1;
  overflow-y: auto;
  background: #0d1117;
  padding: 20px;
}

/* 页面加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content > * {
  animation: fadeIn 0.5s ease-out;
}
</style>

<style scoped>
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 60px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background-color: #545c64;
  overflow-y: auto;
}

.el-menu-vertical {
  border-right: none;
  background-color: #545c64;
  height: 100%;
}

.el-menu-vertical .el-menu-item,
.el-menu-vertical .el-sub-menu__title {
  color: #fff;
}

.el-menu-vertical .el-menu-item:hover,
.el-menu-vertical .el-sub-menu__title:hover {
  background-color: #409eff;
}

.el-menu-vertical .el-menu-item.is-active {
  background-color: #409eff;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
}
</style>
